<template>
	<view class="mainCss">
		<view class="titleBox">
			<view class="titleLeft">
				<img src="../../static/title/back.png" class="titleBack" @click="goBack">
			</view>
			<view class="titleText">
				<text>管家订单</text>
			</view>
			<view class="titleRight">

			</view>
		</view>
		<view class="typeBox">
			<view class="type" :class="[type == index ? 'type1' : 'type']" v-for="(item, index) in typeList"
				:key="index" @click="tapInfo(index)">
				<text>{{item.typeName}}</text>
			</view>
		</view>
		<view class="bodyBox">
			<view class="">
				<view class="orderBox" v-for="(item, index) in orderList" :key="index">
					<view class="orderInfo">
						<view class="">
							<img :src="item.imgUrl" class="img">
						</view>
						<view class="nameBox">
							<view class="">
								<text>{{ item.name }}</text>
							</view>
							<view class="introduce">
								<text>{{ item.introduce }}</text>
							</view>
						</view>
						<view class="rightBox">
							<view>
								<text class="payfor" v-if="item.state == 1">待支付</text>
								<text class="finish" v-if="item.state == 2">已完成</text>
								<text class="cancel" v-if="item.state == 3">已取消</text>
								<text class="appraiseW" v-if="item.state == 4">待评价</text>
								<text class="appraise" v-if="item.state == 5">已评价</text>
							</view>
							<view class="time">
								<text v-if="item.state == 1">00:05:20</text>
								<text v-if="item.state != 1 && item.state != 3"><text
										style="color: #A8A8A8;">实付</text>￥{{item.money}}</text>
							</view>
						</view>
					</view>
					<view class="appraiseInfo" v-if="item.state == 5">
						<view class="">
							<view class="">
								<img :src="item.appraise.userImg" class="userImg">
							</view>
							<view class="">
								<view class="">
									<text>{{ item.appraise.userName }}</text>
								</view>
								<view class="">

								</view>
							</view>
							<view class="">
								<text>{{ item.appraise.userAppraise }}</text>
							</view>
						</view>
						<view class="">
							<view class="">

							</view>
							<view class="">

							</view>
							<view class="">

							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="block">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 0,
				typeList: [{
					typeName: '全部'
				}, {
					typeName: '待支付'
				}, {
					typeName: '已取消'
				}, {
					typeName: '已完成'
				}, {
					typeName: '待评价'
				}, {
					typeName: '已评价'
				}],
				orderList: [{
					imgUrl: '../../static/home/info.jpg',
					name: '明清街1-20号',
					time: '',
					state: 1,
					introduce: '生活超市',
					money: 1000,
					appraise: [],
				}, {
					imgUrl: '../../static/home/info.jpg',
					name: '明清街1-20号',
					time: '',
					state: 2,
					introduce: '生活超市',
					money: 1000,
					appraise: [],
				}, {
					imgUrl: '../../static/home/info.jpg',
					name: '明清街1-20号',
					time: '',
					state: 3,
					introduce: '生活超市',
					money: 1000,
					appraise: [],
				}, {
					imgUrl: '../../static/home/info.jpg',
					name: '明清街1-20号',
					time: '',
					state: 4,
					introduce: '生活超市',
					money: 1000,
					appraise: [],
				}, {
					imgUrl: '../../static/home/info.jpg',
					name: '明清街1-20号',
					time: '',
					state: 5,
					introduce: '生活超市',
					money: 1000,
					appraise: {
						userImg: '../../static/home/touxiang.png',
						userName: '上善若水',
						userAppraise: '服务好、价格满意',
						appraiseNum: 15,
						goodsNum: 9,
						stars: 4,
						appraiseTime: '09-20',
					},
				}]
			}
		},
		onLoad() {
			for (let i = 0; i < this.orderList.length; i++) {
				this.orderList[i].money = parseFloat(this.orderList[i].money).toFixed(2)
			}
		},
		methods: {
			// 返回
			goBack() {
				uni.navigateBack(0)
			},
			// 获取当前选择
			tapInfo(index) {
				this.type = index
			}
		}
	}
</script>

<style>
	@import '../../css/houseOrder.css';
</style>
